<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子尺寸的计算方法</title>
<style type="text/css">
div {
	margin:5px;
	width:200px;                 /* 宽度200px */
	height:80px;                 /* 高度80px */
	background-color:#fe0;
	border:10px solid #f90;        /* 边框宽度为10px */
	padding:10px;                /* 内边距宽度为10px */
	font-weight:bold;
	font-size:18px;
	line-height:40px;
}
/* 属性值border-box */
.s1 {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
/* 属性值padding-box */
.s2 {
	box-sizing:padding-box;
	-webkit-box-sizing:padding-box;
	-moz-box-sizing:padding-box;
}
/* 属性值content-box */
.s3 {
	box-sizing:content-box;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
}
</style>
</head>
<body>
<div class="s1">border-box</div>
<div class="s2">padding-box</div>
<div class="s3">content-box</div>
</body>
</html>
